<script setup>
import { ref } from 'vue'
const homeUrl = '/pages/index/index'
const initForm = {
  account: '',
  password: ''
}
const form = ref({
  account: 'admin',
  password: '123456'
})
const toHomePage = () =>
  uni.switchTab({
    url: homeUrl
  })
// const dealRes = (res) => {
//   const data = res.data
//   console.log(data)
//   const token = data.token
//   const account = data.account
//   uni.setStorageSync("token",token)
//   uni.setStorageSync("account",account)
// }
const login = () => {
  // uni.request({
  //   // url: '/api/user/login',
  //   method: 'POST',
  //   success: res => {
  //     dealRes(res.data)
  //     toHomePage()
  //   },
  //   fail: err => console.log(err)
  // })
  toHomePage()
}
const resetForm = () => {
  form.value = initForm
}
</script>
<template>
  <view class="content">
    <!-- logo -->
    <view class="logo">
      <image src="../../static/images/xxmLogo.png" class="logo-img"></image>
      <text class="logo-title">咸虾米壁纸</text>
    </view>
    <!-- form -->
    <view class="form-box">
      <text class="form-box-title">用户登录</text>
      <uv-form>
        <uv-form-item>
          <uv-input placeholder="account" class="custom-input" border="bottom" prefixIcon="account" prefixIconStyle="font-size: 22px;color: #909399" v-model="form.account"></uv-input>
        </uv-form-item>
        <uv-form-item>
          <uv-input placeholder="password" class="custom-input" border="bottom" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399" password v-model="form.password"></uv-input>
        </uv-form-item>
        <uv-button text="登录" type="success" size="small" style="margin: 20px;" @click="login"></uv-button>
        <uv-button text="重置" type="primary" size="small" style="margin: 20px;" @click="resetForm"></uv-button>
      </uv-form>
    </view>
    <!-- footer -->
    <text class="footer">&copy;重庆财经学院</text>
  </view>
</template>
<style scoped>
.content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  /* background: pink; */
  /* background-image: linear-gradient(to bottom, #c74684b1, #7d496f9b); */
  background-image: linear-gradient(-225deg, #77ffd2 0%, #6297db 48%, #1eecff 100%);
}

.logo {
  width: 100%;
  height: 300rpx;
  border-color: red;
  margin-top: 20%;
}

.logo-img {
  width: 180rpx;
  height: 150rpx;
  margin-left: 38%;
}

.logo-title {
  display: block;
  margin-left: 41%;
  color: #fff;
  font-weight: 1000;
  color: #16151a;
}

.form-box {
  width: 96%;
  height: 680rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-left: 2%;
  margin-right: 2%;
  box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.5);
}

.form-box-title {
  display: block;
  margin: 40rpx;
  color: #515151;
  font-size: 16px;
  font-weight: 1000;
}

.uv-input__content__field-wrapper {
  height: 42rpx;
}

.uv-form-item {
  width: 94%;
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 18rpx;
}

.footer {
  position: absolute;
  bottom: 20rpx;
  left: 36%;
  color: #3c449b;
  font-weight: 900;
}
</style>